<template>
  <!-- 毕业生数据分析 -->
  <div class="firstJob">
    <div class="box">
      <div class="box_hd">
        <div class="tab" :class = "[ 0 === currentSystem ? 'on' : '']" @click="changeSystem(0)">全部</div>
        <div class="tab" :class = "[ item.labelId === currentSystem ? 'on' : '']" v-for="item in sortList" :key="item.labelId" @click="changeSystem(item.labelId)">{{item.label}}</div>
      </div>
      <div class="box_bd">
        <div class="con">
          <div class="positionTop clearfix">
            <div class="positionLeft fl">
              <div class="tabBox tabBoxTop">
                <PieChart :pieData="pieData" ref="pieChart"></PieChart>
              </div>
              <div class="tabBox">
                <SegmentPieChart ref="segmentPieChart" :occupationMap="occupationMap"></SegmentPieChart>
              </div>
            </div>
            <div class="positionMid fl">
              <GraduateMigrate :migrateData="migrateData" ref="graduateMigrate"></GraduateMigrate>
            </div>
            <div class="positionRight fl">
              <h4 class="conHead"><span class="iconfont icon-qiye"></span>行业分布</h4>
              <div class="tabBox">
                <EnterpriseScroll ref = "enterpriseScroll" :enterpriseData="enterpriseData"></EnterpriseScroll>
                <div class="horn topRight"></div>
                <div class="horn topLeft"></div>
                <div class="horn bottomRight"></div>
                <div class="horn bottomLeft"></div>
              </div>
            </div>
          </div>
          <div class="positionBottom clearfix">
            <div class="positionBottomLeft fl">
              <h4 class="conHead"><span class="iconfont icon-salary-payroll-entry"></span>薪资分布</h4>
              <ColumnChart :salaryData="salaryData" ref="columnChart"></ColumnChart>
              <div class="horn topRight"></div>
              <div class="horn topLeft"></div>
              <div class="horn bottomRight"></div>
              <div class="horn bottomLeft"></div>
            </div>
            <div class="positionBottomMid fl">
              <h4 class="conHead"><span class="iconfont icon-xxx"></span>就业数据</h4>
              <div class="mid_con">
                <div class="percentList clearfix" id="percentList">
                  <div class="percentItem">
                    <div class="percentBox">
                      <div class="fensug" id="first">
                        <div class="wavenum "><b></b></div>
                        <div class="waven waven1">
                            <div class="wave wave1"></div>
                        </div>
                      </div>
                      <div class="txt">就业率</div>
                    </div>
                  </div>
                  <div class="percentItem">
                    <div class="percentBox">
                      <div class="fensug" id="second">
                        <div class="wavenum"><b></b></div>
                        <div class="waven waven2">
                            <div class="wave wave2"></div>
                        </div>
                      </div>
                      <div class="txt">专业对口率</div>
                    </div>
                  </div>
                </div>
                <div class="horn topRight"></div>
                <div class="horn topLeft"></div>
                <div class="horn bottomRight"></div>
                <div class="horn bottomLeft"></div>
              </div>
            </div>
            <div class="positionBottomRight fl">
              <h4 class="conHead"><span class="iconfont icon-zu574"></span>月份分布</h4>
              <AreaLineChart :monthData="monthData" ref="areaLineChart"></AreaLineChart>
              <div class="horn topRight"></div>
              <div class="horn topLeft"></div>
              <div class="horn bottomRight"></div>
              <div class="horn bottomLeft"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _getAllData } from '../../network/graduate.js'
import { _getGrade } from '../../network/common.js'

import GraduateMigrate from '../graduateInfo/GraduateMigrate.vue'
import ColumnChart from '../../components/chart/ColumnChart.vue'
import AreaLineChart from '../../components/chart/AreaLineChart.vue'
import PieChart from '../../components/chart/PieChart.vue'
import SegmentPieChart from '../../components/chart/SegmentPieChart.vue'
import EnterpriseScroll from '../../components/chart/EnterpriseScroll.vue'

export default {
  name: 'DataAnalysis',
  mounted () {
    /* 获取系类别信息 */
    _getGrade().then(res => {
      if(res.data.code === 200){
        this.sortList = res.data.gradeList
      } else {
        switch(res.headers.flag){
          case '-1':
            this.$message.error('请先登录')
            this.$router.push('/login')
            break
          case '-2':
            localStorage.removeItem('token')
            this.$message.error('token错误或已失效，请重新登录')
            this.$router.push('/login')
            break
          default:
            this.$message.error('系别获取数据失败')
            break;
        }
      }
    }).catch(res => {
      this.$message.error("未知错误，请联系管理员")
    })
    this.getAllData()
    window.addEventListener('resize',this.resizeCon)
  },
  data () {
    return {
      sortList: [],
      colors: ['#ffa022', '#FFFF00', '#3ed4ff', '#a6c84c', '#00FFFF', '#98FB98'],
      monthData:[],
      pieData: [],
      enterpriseData: [],
      currentSystem: 0,
      migrateData: {
        geoCoordMap: {
            安徽省铜陵: [117.81154, 30.945515],
            长春: [125.8154, 44.2584],
            长沙: [113.0823, 28.2568],
            贵阳: [106.6992, 26.7682],
            杨凌: [109.1162, 34.2004],
            深圳: [114.5435, 22.5439],
            济南: [117.1582, 36.8701],
            海口: [110.3893, 19.8516],
            沈阳: [123.1238, 42.1216],
            武汉: [114.3896, 30.6628],
            红安: [114.23, 31.1],
            昆明: [102.9199, 25.4663],
            杭州: [119.5313, 29.8773],
            成都: [103.9526, 30.7617],
            拉萨: [91.1865, 30.1465],
            天津: [117.4219, 39.4189],
            广州: [113.27324, 23.15792],
            呼和浩特: [111.4124, 40.4901],
            哈尔滨: [127.9688, 45.368],
            北京: [116.4551, 40.2539],
            南京: [118.8062, 31.9208],
            南宁: [108.479, 23.1152],
            南昌: [116.0046, 28.6633],
            乌鲁木齐: [87.9236, 43.5883],
            上海: [121.4648, 31.2891],
            三亚: [109.5000, 18.2000],
            厦门: [118.0339, 24.4840],
            义乌: [120.0746, 29.3055],
            湛江: [110.3653, 21.2662],
            中山: [113.3926, 22.5159],
            汕头: [116.4331, 23.2503],
            呼和浩特: [111.6230, 40.8077],
            
        },
        HFData: [],
        color: '#ffa022'
      },
      salaryData: [],
      occupationMap: {}
    }
  },
  methods: {
    /* 重置尺寸 */
    resizeCon () {
      this.$refs.columnChart.resizeChart()
      this.$refs.areaLineChart.resizeChart()
      this.$refs.pieChart.resizeChart()
      this.$refs.segmentPieChart.resizeChart()
      this.$refs.graduateMigrate.resizeChart()
    },
    changeSystem (index) {
      this.currentSystem = index
      this.getAllData();
      this.migrateData.color = this.colors[index]
    },
    /* 波浪高度函数 */
    waves (el,data,topColor,bottomColor) {
      let dom = document.getElementById(el)
      dom.querySelector('.waven').style.background = topColor
      dom.querySelector('.wave').style.height = '0px';
      var waveHeight = 0;
      dom.querySelector('b').innerHTML = data;
      var data = parseInt(data);
      if (waveHeight < data) {
        dom.style.borderColor = bottomColor;
        dom.querySelector('.waven').style.background = topColor;
        dom.querySelector('.wave').style.height = data+'px';
        waveHeight++;
      }
      waveHeight = 0;
    },
    /* 获取所有数据 */
    getAllData () {
      _getAllData(this.currentSystem).then(res => { 
        if(res.data.code === 200){
          this.pieData = res.data.jobOrientList
          this.enterpriseData = res.data.employerList
          setTimeout(()=>{
            this.$refs.enterpriseScroll.startRoll()
          },1000)
          this.monthData = res.data.monthList
          this.salaryData = res.data.salaryList
          this.waves('first',res.data.employRate,'#2d6795','#3eb9ff');
          this.waves('second',res.data.counterpartRate,'#315595','#376ffe');
          this.migrateData.HFData = res.data.cityList
          this.occupationMap = res.data.occupationMap
          this.$refs.graduateMigrate.initMap()
        }
      })
    }
  },
  components: {
    GraduateMigrate,
    ColumnChart,
    AreaLineChart,
    PieChart,
    SegmentPieChart,
    EnterpriseScroll
  },
  beforeDestroy() {
    window.removeEventListener("resize",this.resizeCon);
  }
}
</script>

<style scoped>
@import '../../assets/wave.css';
</style>
<style scoped>
.firstJob{
  height: 100%;
  padding: 10px;
  background-color: #f7f7ff;
}
.box{
  position: relative;
  height: 100%;
  background: #080a1f;;
  border-radius: 5px;
  overflow: hidden;
}
/* 头部 */
.box .box_hd{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #253443;
  padding: 0 20px;
}
.box_hd .tab{
  display: inline-block;
  color: #b6daf9;
  padding: 0 12px;
  line-height: 40px;
  cursor: pointer;
}
.box_hd .tab.on{
  color: #0681ff;
  background: url(../../assets/img/icon_tab_bg.png) no-repeat;
  background-size: 100% 100%;
}
/* 具体内容区域 */
.box .box_bd{
  height: 100%;
  padding-top: 41px;
}
.box_bd .con{
  position: relative;
  height: 100%;
  padding: 15px;
}
.con .positionTop{
  height: 70%;
  padding-bottom: 10px;
}
.positionTop .positionLeft, .positionTop .positionRight{
  width: 30%;
  height: 100%;
}
.positionTop .positionMid{
  position: relative;
  width: 40%;
  height: 100%;
}
.positionTop .positionRight{
  position: relative;
  padding: 20px 0 20px 20px;
}
.positionRight .tabBox{
  position: relative;
  height: 100%;
  border: 1px solid #112553;
}
.con .positionBottom{
  height: 30%;
}
.positionBottom .positionBottomLeft,.positionBottom .positionBottomRight{
  position: relative;
  width: 35%;
  height: 100%;
  border: 1px solid #112553;
}
.positionBottom .positionBottomMid{
  width: 30%;
  height: 100%;
  padding: 0 10px;
}
.positionBottomMid .mid_con{
  position: relative;
  height: 100%;
  border: 1px solid #112553;
  padding:5px 10px;
  overflow: hidden;
  z-index: 1;
}
.positionLeft .tabBox{
  height: 50%;
}
.positionLeft .tabBoxTop{
  padding-bottom: 10px;
}
/* .con .con_left{
  width: 100%;
  height: 100%;
  padding-right: 335px;
}
.con .con_right{
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  width: 325px;
} */

/* 饼状图 */
.conBox{
  position: relative;
  height: 32%;
}
.conBox:not(:last-child){
  margin-bottom: 2%;
}
.conBox .conHead{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  background-color: #182f5f;
  border-radius: 3px;
}
.conBox .conBody{
  height: 100%;
  background-color: #0d2e49;
}

/* 水波图 */
.percentList{ height: 100%; }
.percentList .percentItem{ float: left; width: 50%; height: 100%; text-align: center; display: table; }
.percentItem .percentBox{ display: table-cell; vertical-align: middle; margin: 0 auto; text-align: center; position: relative; }
.percentItem canvas{ position: relative; z-index: 9; }
.percentItem .txt{ color: #e5e5e5; margin-top: 15px; }

/* 边角处理 */
.horn{
    position: absolute;
    width: 16px;
    height: 16px;
}
.topRight{
    top: 0;
    right: 0;
    background: url(../../assets/img/topRight.png) no-repeat;
}
.topLeft{
    top: 0;
    left: 0;
    background: url(../../assets/img/topLeft.png) no-repeat;
}
.bottomRight{
    bottom: 0;
    right: 0;
    background: url(../../assets/img/bottomRight.png) no-repeat;
}
.bottomLeft{
    bottom: 0;
    left: 0;
    background: url(../../assets/img/bottomLeft.png) no-repeat;
}
/* 标题 */
.conHead{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 150px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  font-size: 18px;
  background-color: #1a2f60;
  border: 1px solid rgb(231, 231, 231);
  color: rgb(236, 234, 234);
  z-index: 5;
}
.conHead .iconfont{
  position: relative;
  right: 4px;
  font-size: 18px;
}
</style>
